<!--
 * @Description: 请填写简介
 * @Author: error: git config user.name & please set dead value or install git
 * @Date: 2022-05-30 14:09:31
 * @LastEditors: 15694822360
 * @LastEditTime: 2022-06-02 15:57:41
 * 
-->
<template>
  <el-menu
    router
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <div v-for="(item, index) in submenuList" :key="index">
      <!-- 一级菜单（没有任何子级菜单）-->
      <el-menu-item
        :index="item.path"
        v-if="!item.menuList"
        @click="jump(item.path)"
        >{{ item.title }}</el-menu-item
      >
      <!-- 一级菜单（有子级菜单）-->
      <el-submenu :index="item.path" v-else>
        <template slot="title">{{ item.title }}</template>
        <!-- 遍历二级菜单容器 -->
        <div v-for="(i, index) in item.menuList" :key="index">
          <!-- 判断二级菜单（没有三级菜单）-->
          <el-menu-item :index="i.path" v-if="!i.list">{{
            i.title
          }}</el-menu-item>
          <!-- 判断二级菜单（有三级菜单）-->
          <el-submenu :index="i.path" v-if="i.list">
            <template slot="title">{{ i.title }}</template>
            <el-menu-item
              :index="j.path"
              v-for="(j, index) in i.list"
              :key="index"
              >{{ j.title }}
            </el-menu-item>
          </el-submenu>
        </div>
      </el-submenu>
    </div>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      submenuList: [
        {
          title: "主页",
          path: "/main",
          menuList: [
            {
              title: "大屏显示",
              path: "/main/viewpic",
            },
            {
              title:"用户列表",
              path:"/main/user"
            }
          ],
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      this.$router.push("/main/index");
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      this.$router.push("/main/index");
      console.log(key, keyPath);
    },
    jump(path) {
      this.$route.push(path);
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  border: none;
}
</style>
